<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style type="text/css">
        .grid {
            margin: auto;
            width: 500px;
            text-align: center;
        }

        .grid table {
            width: 100%;
            border-collapse: collapse;
        }

        .grid th,
        td {
            padding: 10;
            border: 1px dashed orange;
            height: 35px;
            line-height: 35px;
        }

        .grid th {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div id="app">


        <div class="grid">
            <div>
                <h1>图书管理</h1>
                <div class="book">
                    <div>
                        <!-- <label for="id">
                      编号：
                    </label>
                    <input type="text" id="id" v-model='id'> -->
                        <label for="name">
                            名称：
                        </label>
                        <input type="text" id="name" v-model.trim='name'>
                        <button @click='handle'>新增</button>
                        <button @click='myedit'> 编辑</button>
                    </div>
                </div>
            </div>

            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for='(item,index) in books' :key="index">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date | format('yyyy-MM-dd')}}</td>
                        <td>
                            <a href="" @click.prevent='mychange(item.id)'>修改</a>
                            <span>|</span>

                            <!-- delete  不能用 -->
                            <a href="" @click.prevent='mydelete(item.id)'>删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>




    </div>
    <script src="./vue.js"></script>
    <script>
        /*
         第一步     输入框动态绑定输入的值
        
        
        */


          // 定义全局过滤器  每一个实例对象都可以使用
          Vue.filter("format",function(val,arg) {
            if(arg=='yyyy-MM-dd') {
                 let ret='';
              let year=val.getFullYear()
              let month= val.getMonth()+1
              let days= val.getDate()
              console.log(year, month,days)   
              ret=`${year}年-${month}月-${days}号`
              return   ret
            }
            return val

        })


        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'vue',
                name: '',
                id:'',
                books: [{
                    id: 1,
                    name: '三国演义',
                    date: new Date()
                }, {
                    id: 2,
                    name: '水浒传',
                    date: new Date()
                }, {
                    id: 3,
                    name: '红楼梦',
                    date: new Date()
                }, {
                    id: 4,
                    name: '西游记',
                    date: new Date()
                }]
            },
            methods: {

                handle() {
                    //es6解构赋值
                    //     let {name,books}=this
                    //     // console.log(name)
                    //     // console.log(books)
                    //   books.push(name) 
                    //   console.log(books)


                    // let obj = { name: this.name, id:}
                    let obj = {}
                    obj.name = this.name

                    //id  计算   分开写
                    let id = this.books.length;
                    id++;

                    obj.id = id
                    obj.date = new Date()
                    console.log(obj)

                    this.books.push(obj)
                    this.name = ''


                },
                //先修改
                mychange(id) {
                    let newArr = this.books.filter(item => item.id == id)
                    console.table(newArr)
                this.name=newArr[0].name
                this.id=newArr[0].id

                },


                //编辑  

                myedit() {
                    let {id,name}=this
                    // this.books.forEach(item=>{
                    //     if(item.id==id) {
                    //         item.name=name
                    //     }
                    // })
                 this.books= this.books.filter(item=>{
                        if(item.id==id) {
                            item.name=name
                            return true
                        }
                      return  true
                    })

                    this.name=''
                },

                //删除 
                mydelete(id) {
                    // alert(1)
                    //方式一
                    //   let newArr=    this.books.filter((item,index)=>{
                    //           if(item.id!=id) {
                    //               return true
                    //           }
                    //       })

                    //       console.log(newArr)
                    //       this.books=newArr

                    // 方式二  
                    this.books = this.books.filter(item => item.id != id)

                }





            }
        });
    </script>
</body>

</html>